<script>
import {axiosAddNewLike, axiosGetPosts} from "../api";
import {getLoginStorage} from "../saves/sessionStorage";

export default {
  name: "publicPosts",
  data() {
    return {
      postList: [],
      login: getLoginStorage(),
      total:1,
      page:1,
      imgList:[
          {
            img1:"",
            img2:"",
            img3:"",
            img4:"",
            img5:"",
          }
      ]
    }
  },
  beforeMount() {
    this.load();
  },
  methods: {
    switchNewPost() {
      if (this.login) {
        this.$router.push({name: "newPost"});
      } else {
        this.$router.push({name: "account"});
      }
    },
    async load() {
      let result = await axiosGetPosts({id: 1, number: 9999, method: "MPublic", account: ""});
      if (result.status === 200) {
        this.postList = result.data.map((item)=>{
          return {
            ...item,
            imgList: this.imgList
          }
        })
        this.postList = {
          ...result.data,
          imgList:this.imgList
        }

        try {
          if (this.postList[0].postCount > 0) {
            this.total = result.data.postCount;
          }
        }catch (e) {
          console.log(e.message)
        }
      }
    },
    getPageNum(value){
      this.page = value;
      this.load();
    },
    otherClick(post) {
      if (this.login) {
        this.$router.push({name: "otherInfo",query:{account:post.account}});
      } else {
        this.$router.push({name: "account"});
      }
    },
    postClick(post){
      if (this.login) {
        this.$router.push({name: "detailsPosts",query:{post:post}});
      } else {
        this.$router.push({name: "account"});
      }
    },
    likeClick(post) {
      if (this.login) {
        axiosAddNewLike({id:post.id,account:this.account})
      } else {
        this.$router.push({name: "account"});
      }
    },
    collectionClick(post){
      if (this.login) {
        this.$router.push({name: "detailsPosts",query:{id:post.id}});
      } else {
        this.$router.push({name: "account"});
      }
    }
  }
}
</script>

<template>
  <div id="publicPosts">
    <div class="middle-box">
      <div class="middle-btn-box">
        <el-button class="btn" @click="switchNewPost">发布我的帖子</el-button>
      </div>
      <div class="posts">
        <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
          <li v-for="(post,index) in postList" class="infinite-list-item" style="margin-top:20px" :key="index">
            <div class="post-style">
              <p @click="otherClick(post)">{{post.userName}}</p>
              <p @click="postClick(post)">{{post.title}}</p>
              <p @click="likeClick(post)">{{post.likeNum}}</p>
              <p @click="collectionClick(post)">{{post.collectionNum}}</p>
            </div>
            <div class="post-img">
              <img v-for="(item,index) in post.imgList" :key="index" :src="item" alt="">
            </div>
          </li>
        </ul>
      </div>
    </div>
    <el-pagination
        :hide-on-single-page="true"
        :total="total"
        background
        layout="prev, pager, next"
        @current-change="getPageNum">
    </el-pagination>
  </div>
</template>

<style scoped src="../style/publicPosts.css">

</style>